<template>
	<!-- 信息采集 -->
	<view class="information-container">
		<view class="home-top">
			<image src="../../static/img/grzx_bg.png"></image>
		</view>
		<view class="home-content">
			<view class="information-select" @click="handleSelect">{{ address }}
				<u-icon name="arrow-down" color="#fff" size="28"></u-icon>
			</view>
			<view class="information-head">
				<view class="information-head-top">
					<!-- <view class="head-top-left">
						<view class="head-top-left-head">网格长</view>
						<view class="head-top-left-bottom">
							<view class="head-top-left-bottom-img">
								<image src="../../static/BG.png"></image>
							</view>
							<view class="head-top-left-bottom-text">超级管理员</view>
						</view>
					</view> -->
					<view class="head-top-left">
						<view class="head-top-left-head">网格员</view>
						<view class="head-top-left-bottom2">
							<view class="head-top-left-bottom-img2">
								<image :src="personInfo.userImage"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="information-head-bottom">
					<view class="information-head-bottom-head">管理网格<text>(2)</text></view>
					<view class="information-head-bottom-2">
						<view class="information-head-bottom-2-item">{{personInfo.gridName}}</view>
						<!-- 						<view class="information-head-bottom-2-item">塔坨社区第四网格</view> -->
					</view>
				</view>
			</view>
			<view class="information-content">
				<view class="information-content-item" v-for="(item,index) in List" :key="index" @click="handleList(item.page)">
					<view class="information-content-item-left">
						<view class="information-content-item-left-text">{{ item.text }}</view>
						<view class="information-content-item-left-num">{{ item.num }}</view>
					</view>
					<view class="information-content-item-right">
						<image mode="widthFix" :src="item.img"></image>
					</view>
				</view>
			</view>
			<view class="information-bottom">运用大数据提升国家治理现代化水平</view>
		</view>

		<!-- 列选择器 -->
		<u-select v-model="show" mode="mutil-column-auto" :list="gridList" @confirm="confirm"></u-select>
		<u-popup v-model="midButton" mode="bottom" border-radius="30">
			<view class="midButton">
				<view class="midButton-head">选择您要添加的项目</view>
				<view class="midbutton-content">
					<view class="midbutton-content-item" v-for="(item,index) in midButtonList" :key="index" @click="handlemidButton(item.page)">
						<view class="item-top">
							<image :src="item.img"></image>
						</view>
						<view class="item-bottom">{{ item.text }}</view>
					</view>
				</view>
				<view class="midbutton-cacel" @click="midButton=false">取消</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				gridList: [],
				midButton: false,
				midButtonList: this.midButtonList,
				address: '塔坨社区',
				show: false,
				List:[
					{
						img: '../../static/icon/loufang.png',
						text: '楼栋',
						num: '0',
						page: '../InformationCollection/InformationCollection-building/InformationCollection-building'
					},
					{
						img: '../../static/icon/fangwu.png',
						text: '房屋',
						num: '0',
						page: '../InformationCollection/House/House'
					},
					{
						img: '../../static/icon/xiaoqu.png',
						text: '小区',
						num: '0',
						page: '../InformationCollection/Courtyard/Courtyard'
					},
					{
						img: '../../static/icon/huji.png',
						text: '户籍',
						num: '0',
						page: '../InformationCollection/Domicile/Domicile'
					},
					{
						img: '../../static/icon/renkou.png',
						text: '人口',
						num: '0',
						page: '../InformationCollection/Population/Population'
					},
					{
						img: '../../static/icon/icon_key_personnel.png',
						text: '重点人员',
						num: '0',
						page: '../InformationCollection/keyPersonnel/keyPersonnel'
					},
					{
						img: '../../static/icon/qiye_h11.png',
						text: '企业',
						num: '0',
						page: '../InformationCollection/Company/Company'
					},
					{
						img: '../../static/icon/icon_hospital.png',
						text: '医院',
						num: '0',
						page: '../InformationCollection/Hospital/Hospital'
					},
					{
						img: '../../static/icon/xuexiaobeifen.png',
						text: '学校',
						num: '0',
						page: '../InformationCollection/School/School'
					},
					{
						img: '../../static/icon/dianpu.png',
						text: '店铺',
						num: '0',
						page: '../InformationCollection/Shop/Shop'
					},
					{
						img: '../../static/icon/h5.png',
						text: '公共设施',
						num: '0',
						page: '../InformationCollection/Part/Part'
					},
					{
						img: '../../static/icon/xinfang1.png',
						text: '走访',
						num: '0',
						page: '../WorkSetting/PetitionManagement/PetitionManagement'
					},
					{
						img: '../../static/icon/shijian1.png',
						text: '事件',
						num: '0',
						page: '../ThingsList/ThingsList'
					},
					// {
					// 	img: '../../static/icon/icon_road_railway_sections.png',
					// 	text: '铁路重点路段',
					// 	num: '0',
					// 	page: ''   // - - - - - - - - - - - - -  - - - -
					// },
				],
				personInfo: {}
			}
		},
		onLoad() {
			uni.onTabBarMidButtonTap((e) => {
				this.midButton = true
			})
		},
		onShow() {
			this.midButton = false
		},
		mounted() {
			this.getIndexInfo()
			this.eventNum()
			this.getGridList()
			this.getPersonInfo()
		},

		methods: {
			getGridList() {
				this.$u.api.getGridList()
					.then(res => {
					
						if (res.code == 200) {
							this.gridList = [{
								value: res.result.depart.id,
								label: res.result.depart.departName,
								children: this.getSon(res.result.son)
							}]
							// this.personInfo.girderHeadImg = res.result.grid.girderHeadImg
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			getSon(son) {
				if (son.length > 0) {
					let children = son.map((data) => {
						return {
							value: data.depart.id,
							label: data.depart.departName,
						}
					})

					return children
				}
			},
			handlemidButton(url) {
				uni.navigateTo({url})
			},
			eventNum() {
				this.$u.api.getEventNum()
					.then(res => {
						// console.log(res)
						// this.List[11].num = res.result.submitEventNum // 走访
						this.List[12].num = res.result.submitEventNum // 事件
					})
					.catch(err => {
						console.log(err)
					})

			},
			getIndexInfo() {
				this.$u.api.indexInfo()
					.then(res => {
						console.log('数量', res)
						if (res.code == 200) {
							this.List[0].num = res.result.buildingNum
							this.List[1].num = res.result.houseNum
							this.List[2].num = res.result.quartersNum
							this.List[3].num = res.result.registerFamilyNum // 户籍
							this.List[4].num = res.result.personNum
							this.List[5].num = res.result.importantPersonNum
							this.List[6].num = res.result.enterpriseNum
							this.List[7].num = res.result.hospitalNum // 医院
							this.List[8].num = res.result.campusNum //  学校
							this.List[9].num = res.result.shopNum
							this.List[10].num = res.result.publicTranNum
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			// 选择
			confirm(e) {
				console.log(e)
				this.address = e[e.length - 1].label
			},
			// 列选择器
			handleSelect() {
				this.show = true
			},
			handleList(url) {
				uni.navigateTo({url})
			},
			getPersonInfo() {
				this.$u.api.PersonInfo()
					.then(res => {
						console.log(res)
						if (res.code == 200) {
							this.personInfo = res.result.mobileLonginUser
							this.personInfo.gridName = res.result.gridStaff.gridName
							if (this.personInfo.userPolitical == 1) {
								this.personInfo.userPolitical = '群众';
							} else if (this.personInfo.userPolitical == 2) {
								this.personInfo.userPolitical = '中共党员';
							} else if (this.personInfo.userPolitical == 3) {
								this.personInfo.userPolitical = '中共预备党员';
							} else if (this.personInfo.userPolitical == 4) {
								this.personInfo.userPolitical = '共青团员';
							}

							if (this.personInfo.userSex == 1) {
								this.personInfo.userSex = '男'
							} else if (this.personInfo.userSex == 2) {
								this.personInfo.userSex = '女'
							}

							let userType = res.result.mobileLonginUser.userType
							let type = ''
							if (userType.indexOf('1') >= 0) {
								type = '网格员';
							} else if (userType.indexOf('2') >= 0) {
								type = '护路员'
							} else if (userType.indexOf('3') >= 0) {
								type = '政法委员'
							} else if (userType.indexOf('4') >= 0) {
								type = '群防群治队员'
							} else if (userType.indexOf('5') >= 0) {
								type = '协警'
							} else if (userType.indexOf('6') >= 0) {
								type = '领导'
							} else if (userType.indexOf('7') >= 0) {
								type = '小区物业管理员'
							} else if (userType.indexOf('8') >= 0) {
								type = '楼栋长'
							}
							this.personInfo.name = res.result.mobileLonginUser.userRealname
							this.personInfo.userType = type
							this.personInfo.userImage = res.result.gridStaff.userHeadImg
							this.personInfo.groupName = res.result.gridStaff.gridName
						}
					})
					.catch(err => {
						console.log(err)
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.information-container {
		background-color: #f5f6f7;

		.midButton {
			width: 100%;
			min-height: 50vh;
			padding: 20rpx;

			.midbutton-cacel {
				width: 100%;
				padding: 20rpx 0;
				color: #000;
				font-size: 30rpx;
				font-weight: 600;
				text-align: center;
				border-top: 1px solid #f4f1f1;
			}

			.midButton-head {
				width: 100%;
				padding: 20rpx 0;
				color: #000;
				font-size: 30rpx;
				font-weight: 600;
				text-align: center;
			}

			.midbutton-content {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-wrap: wrap;
				padding: 20rpx 0;

				.midbutton-content-item {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					color: #333;
					font-size: 28rpx;
					width: 25%;
					margin: 10rpx 0;

					.item-top {
						width: 30px;
						height: 30px;
						margin-bottom: 10rpx;

						image {
							width: 30px;
							height: 30px;
						}
					}
				}
			}
		}

		.home-top {
			width: 100%;
			height: 30vh;
		}

		.home-content {
			position: absolute;
			top: 10rpx;
			left: 50%;
			width: 680rpx;
			min-height: 95vh;
			transform: translateX(-340rpx);

			.information-bottom {
				width: 100%;
				text-align: center;
				color: #999;
				font-size: 30rpx;
				font-weight: 100;
				margin-top: 50rpx;
				padding-bottom: 50rpx;
			}

			.information-select {
				color: #fff;
				font-size: 34rpx;
				font-weight: 600;
				margin-top: 20rpx;
			}

			.information-head {
				margin: 40rpx 0;
				background-color: #fff;
				width: 100%;
				border-radius: 15rpx;
				box-shadow: 0 3px 3px #eee, 0 0 3px #eee, 0 0 3px #eee;
				padding: 20rpx;
				min-height: 300rpx;
				.information-head-top {
					display: flex;
					padding-bottom: 20rpx;

					.head-top-left:nth-child(1) {
						border-right: 1px solid #f4f1f1;
					}

					.head-top-left:nth-child(2) {
						padding-left: 20rpx;
					}

					.head-top-left {
						.head-top-left-bottom2 {
							display: flex;
							justify-content: flex-start;
							align-items: center;
							position: relative;

							.head-top-left-bottom-img2 {
								width: 70rpx;
								height: 70rpx;
								margin-right: 10rpx;

								image {
									border-radius: 50%;
								}
							}
						}

						flex: 1;

						.head-top-left-head {
							color: #000;
							font-size: 27rpx;
							font-weight: 600;
							margin-bottom: 10rpx;
						}

						.head-top-left-bottom {
							display: flex;
							justify-content: flex-start;
							align-items: center;

							.head-top-left-bottom-img {
								width: 70rpx;
								height: 70rpx;
								margin-right: 10rpx;

								image {
									border-radius: 50%;
								}
							}

							.head-top-left-bottom-text {}
						}
					}
				}

				.information-head-bottom {
					border-top: 1px solid #f4f1f1;
					padding-top: 20rpx;

					.information-head-bottom-head {
						color: #000;
						font-size: 27rpx;
						font-weight: 600;
						margin-bottom: 20rpx;

						text {
							display: inline-block;
							margin-left: 15rpx;
							color: #007AFF;
						}
					}

					.information-head-bottom-2 {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						flex-wrap: wrap;

						.information-head-bottom-2-item {
							padding: 4rpx 10rpx;
							border-radius: 8rpx;
							background-color: #eaf0f9;
							margin-right: 10rpx;
							color: #007AFF;
							font-size: 24rpx;
						}
					}
				}
			}

			.information-content {
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-wrap: wrap;

				.information-content-item:nth-child(1) {
					background-color: #e3f0fd;
					color: #007AFF;
				}

				.information-content-item:nth-child(2) {
					background-color: #d3f6f7;
					color: #6dcbda;
				}

				.information-content-item:nth-child(3) {
					background-color: #fdf4e3;
					color: #f4bb53;
				}

				.information-content-item:nth-child(4) {
					background-color: #f0e3fb;
					color: #846afc;
				}

				.information-content-item:nth-child(5) {
					background-color: #e3f0fd;
					color: #007AFF;
				}

				.information-content-item:nth-child(6) {
					background-color: #fdf4e3;
					color: #f4bb53;
				}

				.information-content-item:nth-child(7) {
					background-color: #f0e3fb;
					color: #846afc;
				}

				.information-content-item:nth-child(8) {
					background-color: #fae3e7;
					color: #e35b52;
				}

				.information-content-item:nth-child(9) {
					background-color: #fdf4e3;
					color: #f4bb53;
				}

				.information-content-item:nth-child(10) {
					background-color: #e3f0fd;
					color: #007AFF;
				}

				.information-content-item:nth-child(11) {
					background-color: #fae3e7;
					color: #e35b52;
				}
				.information-content-item:nth-child(12) {
					background-color: #f0e3fb;
					color: #846afc;
				}
				.information-content-item:nth-child(13) {
					background-color: #fdf4e3;
					color: #f4bb53;
				}
				.information-content-item:nth-child(14) {
					background-color: #d3f6f7;
					color: #6dcbda;
				}

				.information-content-item {
					width: 48%;
					height: 160rpx;
					border-radius: 10rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-top: 20rpx;

					.information-content-item-left {
						display: flex;
						justify-content: flex-start;
						align-items: flex-start;
						flex-direction: column;
						min-width: 50%;

						.information-content-item-left-text {
							font-size: 28rpx;
						}

						.information-content-item-left-num {
							font-size: 39rpx;
							font-weight: 600;
						}
					}

					.information-content-item-right {
						width: 54rpx;
					}
				}
			}
		}
	}
</style>
